<!DOCTYPE html>
<html>
<head>
<title>info_list.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!-- index import css start -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/footer.css">
<link rel="stylesheet" href="../css/resetpwd.css">
<!-- index import css end -->
<link rel="stylesheet" href="../css/bootstrap.min.css" >
<link rel="stylesheet" href="../css/alertify/alertify.core.css">
<link rel="stylesheet" href="../css/alertify/alertify.default.css" id="toggleCSS">

<style type="text/css">
.list-mail ul {
	border: 1px solid #aaa;
	line-heihgt: 24px;
	padding: 6px;
	background: #ddd;
}

.list-mail li {
	cursor: pointer;
	padding: 2px 3px;
	margin-bottom: 2px;
}

.list-mail .name {
	color: #982114;
}

.list-mail .hover {
	background: #fefacf;
}

.list-mail .select {
	background: #dedaae;
}
</style>
</head>

<body>
	
	<div class="resetpwd_div">
		<!-- 这里单纯的使用一个div 没有布局成功，现在使用的是三个div，第一个和第三个只是起到布局效果 -->
		<div class="cotainer col-lg-4 col-md-4 col-sm-3"></div>
		<div class="cotainer col-lg-4 col-md-4 col-sm-6 col-xs-12 content_vcenter">
			<form role="form" action="" class="">
				<span>邮箱</span> <input type="text" name="" id="resetpwd_input_eamil"
					class="form-control resetpwd_input_eamil"
					placeholder="input your email"> 
				<span>验证码</span> 
				<div class="">
					<input type="text" name="" id="resetpwd_input_verifycode"
						class="form-control popover-show resetpwd_input_verifycode  "
						data-toggle="popover" data-trigger="manual" data-placement="auto"
						data-content="<div><span  style='color:red;'>验证码错误</span><div>"
						data-html=true placeholder="input your verifyCode">
					<button class="btn btn-primary resetpwd_btn_getVerifyCode  "
						id="resetpwd_btn_getVerifyCode">获取验证码</button>
	
				</div>
				<button class="btn btn-info resetpwd_btn_next" id="resetpwd_btn_next">下一步</button>
			</form>
		</div>
		<div class="cotainer col-lg-4 col-md-4 col-sm-3"></div>
			
	</div>
	
	<script src="../js/jquery.min.js"></script>
	<script src="../js/emailautocomplete2.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/alertify/alertify.min.js"></script>
	<script src="../js/resetpwd.js"></script>
	<script>
		$(function() {
			/* $('.popover-show').popover('show');
			$('.popover-show').popover('hide'); */
			$('#resetpwd_btn_next').click(function() { 
				var vcr = 'adff';
				var vcu = $('#resetpwd_input_verifycode').val();
				if (vcr == vcu) {
					/* alert('a'); */
				} else {
					$('.popover-show').popover('show');
					return false;
				}
			})
			$('input').focus(function() {
				$('.popover-show').popover('hide');
			})
			/* 点击获取验证码 */
			$('#resetpwd_btn_getVerifyCode').click(function() {
				var email = $("#resetpwd_input_eamil").val();
				if (email.length < 1) {
					reset();
					alertify.error("邮箱不能为空");
					return false;
				}
				var re = /\w@\w*\.\w/;
				if (re.test(email)) { 	 	
		
					this.disabled = 'disabled';
					var t = 60;
					var refresh = function() {
						$('#resetpwd_btn_getVerifyCode').text(t + "秒后再次获取");
						t--;
						if (t < 1) {
							$('#resetpwd_btn_getVerifyCode')[0].removeAttribute('disabled');
							$('#resetpwd_btn_getVerifyCode').text("重新获取");
							window.clearInterval(intervalId);
						}
					};
					refresh();
					var intervalId = window.setInterval(refresh, 1000);
					return true;
				} else {
					reset();
					alertify.error("请输入正确的邮箱");
					return false;
				}
				
			})
			
			$('#resetpwd_input_eamil').autoMail();

		});
		
	</script>

</body>
</html>
